import React from 'react'
import MyTabBar from '../../components/MyTabBar'
import { List, Space,Tag } from 'antd-mobile'
import { RightOutline } from 'antd-mobile-icons'
import './index.css'
import { getUserInfo } from '../../api/user'
import { useEffect,useState } from 'react'
import defaultAvatar from '../../image/cat.png'
import petAdopt from '../../image/pet-adopt.png'
import note from '../../image/note.png'
import Apply from '../../image/apply.png'
export default function My() {
  const [userInfo,setUserInfo] = useState({});
  const funObj = [
    { id: 1, img: petAdopt, name: '我的领养', url: '#' },
    { id: 2, img: note, name: '申请记录', url: '#' },
    { id: 3, img: Apply, name: '我的帖子', url: '#' },
  ]
  const list = [
    { id: 1, name: '新手养狗攻略，最全的养护指南！', topic:'# 新手必看', url:'#'},
    { id: 2, name: '狗勾要经常洗澡吗，多久洗一次合适呢？！', topic:'# 萌宠洗护', url:'#'},
    { id: 3, name: '如何正确给狗狗驱虫，这几点你Get到了吗', topic:'# 驱虫科普',url:'#'},
    { id: 4, name: '狗狗是否要绝育，到底值不值带爱宠绝育。', topic:'# 全面严谨',url:'#'},
    { id: 5, name: '狗证如何办理最快？最全的狗证办理流程。', topic:'# 养宠技能',url:'#'},
  ]
  useEffect( () => {
    // Update the document title using the browser API
      async function fetchData(){
        const {data,status} =  await getUserInfo()
        if(status === 0){
          setUserInfo(data)
        }
      }
      fetchData()
  },[]);

  return (
    <div className='my-container'>
      <div className="header">
        <div className="my-info">

          <img src={userInfo.avatar || defaultAvatar} alt="头像" />
          <div className='info-content'>
            <Space block>{userInfo.nickname || '丁丁猫'}</Space>
            <Tag round color='#ecab52' >
            爱心人士
          </Tag>
          </div>
          <Space block 
            style={{position:'absolute',right:'20px',top:'40px',fontSize:'16px'}}>
            <RightOutline />
          </Space>
        </div>
      
        {/* <div className='my-amount'>
            <div>
              <h3>1</h3>
              <Space>我的宠物</Space>
            </div>
           
            <div>
            <h3>450</h3>
              <Space>爱心币</Space> 
            </div>

            <div>
               <h3>0</h3>
            <Space>我的发布</Space>
            
             
            </div>

        </div> */}
      </div>
     
      <div className="my-tab">
        {
          funObj.map((item, index) => {
            return <div
              key={item.id}
              style={{ width: '25vw', fontWeight: 'bold' }}
            >
              <img src={item.img} style={{ height:'10vw'  , borderRadius: '50%' }} alt="照片" />
              <div>{item.name}</div>
            </div>
          })
        }
      </div>
      <div className="my-recommend" >
      <h3>养宠物精选必学小知识</h3>
      <List>
       {
        list.map((item,index) => {
          return <List.Item 
            key={item.id}
            style={{textAlign:'left',
            paddingLeft:'20px',
            
          }
            }>
            <h4>{item.name}</h4>
            <div style={{fontSize:'14px'}}>{item.topic}</div>
          </List.Item>
        })
       }
      </List>
          </div>
      <MyTabBar></MyTabBar>
    </div>
  )
}
